<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>官方资讯</title>
    <!-- TODO: 替换公司cdn -->
    <link
      href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://img.ybl-group.com/mescroll/1.4.0/mescroll.min.css"
    />
    <script
      type="text/javascript"
      src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"
    ></script>
    <script type="text/javascript">
      // $youziku.load('body', 'bfb6183df5ce4a5e9b3f4b8cd06980b7', 'PingFangSCM')
      $youziku.load('body', '6ca276fba2af46d887f384c63fd0af28', 'PingFangSC')
      $youziku.draw()
    </script>
    <style>
      .page {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 20px;
        -webkit-tap-highlight-color: transparent;
      }
      .page a {
        text-decoration: none;
        color: inherit;
      }
      .search-box {
        position: relative;
        margin-top: 14px;
      }
      .search {
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 5px;
        padding-left: 30px;
        border: 1px solid #83dab0;
        border-radius: 13px;
        -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
        outline: 0;
      }
      .search:focus {
        outline: 0;
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
      }
      .icon-search {
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 16px;
        padding-left: 10px;
      }
      .item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }
      .fxl {
        -webkit-box-flex: 2;
        -ms-flex: 2;
        flex: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding-right: 16px;
      }
      .fxr {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        position: relative;
      }
      .u-list {
        list-style: none;
        padding: 0 10px;
        margin: 0;
        margin-top: 20px;
      }
      .item {
        padding: 14px 0;
        position: relative;
      }
      .item::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-bottom: 1px solid #f7f7f7;
        -webkit-transform: translateY(0.5);
        transform: translateY(0.5);
      }
      .title {
        font-size: 15px;
        line-height: 25px;
        color: #333;
      }
      .cover {
        width: 114px;
        height: 76px;
        -o-object-fit: cover;
        object-fit: cover;
      }
      .state {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        font-size: 10px;
        line-height: 25px;
        color: #9d9d9d;
      }
      .icon-eye {
        width: 11px;
        height: 7px;
      }
      .mescroll {
        position: fixed;
        top: 44px;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <!-- 搜索 start -->
      <form class="search-box">
        <img class="icon-search" src="img/search.png" alt="search" />
        <input
          class="search"
          type="search"
          name="keyword"
          placeholder="搜索资讯标题关键字"
        />
      </form>
      <!-- 搜索 end -->
      <div class="page_bd">
        <div class="mescroll" id="mescroll">
          <ul class="u-list">
            <!-- js动态添加数据 -->
          </ul>
        </div>
      </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script
      src="https://img.ybl-group.com/mescroll/1.4.0/mescroll.min.js"
      charset="utf-8"
    ></script>
    <script>
      $(function() {
        var apiList = {
          news: 'http://www.hepulan.com/api2/news'
        }
        var detailUrl = 'consultDetail.html?id='
        $uList = $('.u-list')
        var keyword = ''

        init()

        var mescroll = new MeScroll('mescroll', {
          down: {
            auto: false,
            callback: downCallback
          },
          up: {
            isBounce: false,
            callback: upCallback, //上拉加载的回调
            //以下是一些常用的配置,当然不写也可以的.
            page: {
              num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
              size: 10 //每页数据条数,默认10
            },
            htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
            noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
            // 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
            // 这就是为什么无更多数据有时候不显示的原因.
            toTop: {
              //回到顶部按钮
              src: 'img/to_top.svg', //图片路径,默认null,支持网络图
              offset: 1000 //列表滚动1000px才显示回到顶部按钮
            },
            empty: {
              //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
              warpId: 'xxid', //父布局的id (1.3.5版本支持传入dom元素)
              icon: '../img/mescroll-empty.png', //图标,默认null,支持网络图
              tip: '暂无相关数据~' //提示
            },
            lazyLoad: {
              use: true, // 是否开启懒加载,默认false
              attr: 'imgurl' // 标签中网络图的属性名 : <img imgurl='网络图  src='占位图''/>
            }
          }
        })

        function getListDataFromNet(
          pageNum,
          pageSize,
          successCallback,
          errorCallback
        ) {
          $.ajax({
            type: 'get',
            url: apiList.news,
            data: {
              page: pageNum,
              size: pageSize,
              keyword: keyword
            },
            dataType: 'json',
            success: function(resp) {
              if (resp.code === 200)
                successCallback && successCallback(resp.data)
            },
            error: function() {
              errorCallback && errorCallback()
            }
          })
        }

        function downCallback() {
          getListDataFromNet(
            0,
            5,
            function(data) {
              mescroll.endSuccess()
            },
            function() {
              mescorll.endErr()
            }
          )
        }

        function upCallback(page) {
          getListDataFromNet(
            page.num,
            page.size,
            function(curPageData) {
              mescroll.endSuccess(curPageData.length)
              setListData(curPageData, true)
            },
            function() {
              mescroll.endErr()
            }
          )
        }

        function init(keyword) {
          var keyword = keyword || ''

          $.ajax({
            type: 'get',
            url: apiList.news,
            data: {
              page: 0,
              size: 10,
              keyword: keyword
            },
            dataType: 'json',
            success: function(resp) {
              console.log(resp)
              if (resp.code === 200 && resp.data.length !== 0) {
                resp.data.forEach(function(item) {
                  $uList.append(render_news_list(item))
                })
              }
            }
          })
        }

        $('.search-box').on('submit', function(e) {
          e.preventDefault()
          var $this = $(this)
          keyword = $this.find('input[name=keyword]').val()
          $uList.empty()
          init(keyword)
        })

        function setListData(curPageData, isAppend) {
          curPageData.forEach(function(item) {
            if (isAppend) {
              $uList.append(render_news_list(item))
            } else {
              $uList.prepend(render_news_list(item))
            }
          })
        }

        function render_news_list(data) {
          var tpl =
            '<li class="l-item">' +
            '<a href="' +
            detailUrl +
            data.news_id +
            '"><div class="item" data-id="' +
            data.news_id +
            '">' +
            '<div class="fxl">' +
            '<div class="title">' +
            data.title +
            '</div>' +
            '<div class="state">' +
            '<time class="time">' +
            data.post_date +
            '</time>' +
            '<div class="pv">' +
            '<img class="icon-eye" src="img/read.png" alt="阅读量" />' +
            '<span class="view">1.8K</span>' +
            '</div>' +
            '</div>' +
            '</div>'
          if (data.cover) {
            tpl +=
              '<div class="fxr">' +
              '<img class="cover" src="' +
              data.cover +
              '" alt="封面" />' +
              '</div>'
          }
          tpl += '</div></a></li>'
          return tpl
        }
      })
    </script>
  </body>
</html>
